<template>
  <div class="profit_detail">
    <c-title :hide="false" :text="'盈利/收益'"></c-title>
    <div class="detail_top_box">
      <div class="detail_top_box_t">
        <div class="detail_top_box_t_l">
          <div class="txt">可提现</div>
          <div class="price">
            <div class="small">￥</div>
            {{ info.can_withdraw_income }}
          </div>
        </div>
        <div class="detail_top_box_t_r">
          <div class="txt" style="margin-right: 0.94rem">提现明细</div>
          <div class="btn">去提现<van-icon name="arrow" /></div>
        </div>
      </div>
      <div class="detail_top_box_b">
        <div class="detail_top_box_b_line">
          <div class="txt">收入总额</div>
          <div class="price">￥{{ info.settle_income }}</div>
        </div>
        <div class="detail_top_box_b_line">
          <div class="txt">待提商品</div>
          <div class="price" v-if="info.member">{{ info.member.credit1 }}</div>
        </div>
      </div>
    </div>
    <van-tabs v-model="active" @change="tabChange" title-active-color="#126F46" color="#126F46">
      <van-tab title="收益明细" name="2" :title-style="active == '2' ? 'color:#126F46;font-weight: bold;font-size: 1.13rem;' : 'color:#000000;font-size: 1rem;font-weight: 400;'"></van-tab>
      <van-tab title="盈利明细" name="1" :title-style="active == '1' ? 'color:#126F46;font-weight: bold;font-size: 1.13rem;' : 'color:#000000;font-size: 1rem;font-weight: 400;'"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis" v-for="item in list" :key="item.id">
        <div class="lis_t">
          <div class="lis_t_TXT tl">{{ item.has_one_activity.name }}</div>
          <div class="lis_t_TXT tr">{{ item.type_name }}{{ item.reward_amount }}</div>
        </div>
        <div class="lis_t">
          <div class="time tl">{{ item.created_at }}</div>
          <div class="stausName tr">{{ item.status_name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "2",
      info: [],
      list: [],

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.init();
    this.getData();
    this.getFirstData();
  },
  methods: {
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    tabChange() {
      this.init();
      this.getData();
    },
    async getFirstData() {
      let json = {
        source: [1, 2]
      };
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.reward.summary", json, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.reward.index", { source: this.active }, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          source: this.active
        };
        let { data, msg, result } = await $http.post("plugin.new-auction.frontend.reward.index", json, "");
        this.isLoadMore = true;
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  .lis {
    padding: 0.94rem;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    background: #ffffff;
    .lis_t {
      font-weight: bold;
      font-size: 1rem;
      color: #000000;
      display: flex;
      justify-content: space-between;
      .lis_t_TXT {
        margin-bottom: 0.25rem;
      }
      .tl {
        text-align: left;
      }
      .tr {
        text-align: right;
        word-break: break-all;
        margin-left: 0.3rem;
      }
      .stausName {
        font-weight: 400;
        font-size: 0.75rem;
        color: #808080;
      }
      .time {
        font-weight: 400;
        font-size: 0.75rem;
        color: #8f8f8f;
      }
    }
  }
  .lis:last-child {
    border-bottom: none;
  }
}
.detail_top_box {
  padding: 1.5rem 0.94rem;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 0.94rem;
  .detail_top_box_b {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.63rem;
    .detail_top_box_b_line {
      .txt {
        font-size: 0.88rem;
      }
      .price {
        font-weight: bold;
        font-size: 1.25rem;
        margin-top: 0.31rem;
      }
    }
  }
  .detail_top_box_t {
    width: 21.56rem;
    height: 6.59rem;
    background: linear-gradient(132deg, #399271 0%, #389170 0%, #136345 100%, #136345 100%);
    border-radius: 0.63rem;
    padding: 1.25rem 0 1.25rem 0.94rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .detail_top_box_t_l {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
    }
    .txt {
      font-weight: 400;
      font-size: 1rem;
      color: #ffffff;
      margin-bottom: 0.75rem;
    }
    .price {
      font-weight: bold;
      font-size: 1.56rem;
      color: #ffffff;
      display: flex;
      align-items: flex-end;
      line-height: 2rem;
      .small {
        font-weight: 400;
        font-size: 1rem;
        color: #ffffff;
      }
    }
    .detail_top_box_t_r {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .btn {
        width: 5.31rem;
        height: 1.94rem;
        border-radius: 1rem 0 0 0;
        display: flex;
        align-items: center;
        display: flex;
        justify-content: center;
        font-weight: bold;
        font-size: 1rem;
        color: #126f46;
        background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/new_auction%2Fbg%402x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 0.7rem;
      }
    }
  }
}
</style>
